<template>
  <div>
    <content-header :title="actDetail.title"></content-header>
    <div class="header xui-padding-vertical-md">
      <img-box :imgSrc="actDetail.imgUrl" width="930" height="320"></img-box>
      <div class="header-content xui-margin-top-xl">
        <div class="title-content">
          <h3 class="xui-text-truncate">{{actDetail.title}}</h3>
        </div>
        <div class="xui-margin-bottom-lg xui-margin-top bodyFont" v-html="actDetail.content" ref="bodyFont" :class="{bodyHeight:isActive}"></div>
        <div class="all-text" @click="contentToggle()">
          <span>{{btnText}}</span>
          <i :class="{'el-icon-caret-top': isActive, 'el-icon-caret-bottom': !isActive}"></i>
        </div>
        <div class="btn">
          <el-button v-if="!isOver && !isBefore" type="primary" @click="dialogFormVisible = true">我要参与</el-button>
          <el-button v-if="isOver" type="primary" :disabled="true">活动已结束</el-button>
          <el-button v-if="isBefore" type="primary" :disabled="true">活动未开始</el-button>
        </div>
      </div>
    </div>

    <div class="xui-grid-avg-2 xui-padding-horizontal-children-sm xui-margin-top">
      <div class="xui-margin-bottom" v-for="(item,index) in artList" :key="index" @click="showArtDetail(item.id)">
        <div class="creative-act-card">
          <img-box :imgSrc="item.imgUrl" width="100%" height="230"></img-box>
          <div class="card-body">
            <h3 class="xui-text-truncate">{{item.title}}</h3>
            <span class="name color-gray">{{item.uname}}</span>
            <div class="xui-fc">
              <span class="xui-fl color-gray">{{item.actTime}}</span>
              <div class="xui-fr">
                <span class="xui-fl color-gray xui-margin-right-md"> <i
                class="iconfont icon-eye"></i> {{item.browsNum}}</span>
                <span class="xui-fl color-gray xui-margin-right-md"> <i class="iconfont icon-BAI-pinglun"></i> {{item.comment}}</span>
                <span class="xui-fl color-gray"> <i class="iconfont icon-dianzan"></i> {{item.agree}}</span>
              </div>

            </div>
          </div>
          <!--转发-->
          <div class="forwording"></div>
        </div>
      </div>
    </div>

    <!--我要参与弹出框-->
    <el-dialog
      title="我要参加"
      width="600px"
      :visible.sync="dialogFormVisible">
      <join :id="actId" @done="dialogFormVisible = false"></join>
    </el-dialog>

    <!--作品详情-->
    <el-dialog
      title="作品详情"
      :visible.sync="dialogVisible"
      width="650px">
      <production :detail="artDetail"></production>
    </el-dialog>
  </div>
</template>
<script>
import ContentHeader from "../../../components/widge/content-header";
import ImgBox from "../../../components/widge/img-box";
import pic from "@/assets/images/example/wenc.png";
import Join from "./join";
import Production from "./production";
import {
  getActDetail,
  getArtList,
  getArtDetail,
  getArtCommentList,
  postMyComment
} from "@/api/artCollect";
import { addBrowseNum } from "@/api/detail";

export default {
  components: {
    ImgBox,
    ContentHeader,
    Join,
    Production
  },
  data() {
    return {
      isActive: false,
      curHeight: 0,
      bodyHeight: 999999999999,
      btnText: "展开全文",
      pic,
      dialogFormVisible: false,
      imageUrl: "",
      dialogVisible: false,
      actDetail: {
        title: "",
        content: "",
        imgUrl: ""
      },
      artList: [],
      artDetail: {
        title: "",
        content: "",
        urls: [],
        imgUrl: "",
        isAgree: "N",
        uname: "",
        agree: null,
        comment: null
      }
    };
  },
  computed: {
    actId() {
      return this.$route.params.id;
    },
    userId() {
      return this.$store.getters.userId;
    },
    isOver() {
      let d = new Date();
      let cur = Date.parse(d);
      return cur > this.actDetail.endTime;
    },
    isBefore() {
      let d = new Date();
      let cur = Date.parse(d);
      return cur < this.actDetail.startTime;
    }
  },
  methods: {
    contentToggle() {
      this.curHeight = this.$refs.bodyFont.offsetHeight;
      if (this.curHeight < this.bodyHeight) {
        this.isActive = !this.isActive;
        this.btnText = this.isActive === true ? "收起" : "展开全文";
      } else {
        this.btnText = "展开全文";
      }
    },
    getActDetail() {
      getActDetail(this.actId).then(res => {
        this.actDetail = res.data;
      });
    },
    getArtList() {
      getArtList(this.actId, this.userId).then(res => {
        this.artList = res.data.recordsList;
      });
    },
    getArtDetail(id) {
      return new Promise((resolve, reject) => {
        getArtDetail(id, this.userId).then(res => {
          this.artDetail = res.data;
          resolve();
        });
      });
    },
    showArtDetail(artId) {
      this.getArtDetail(artId).then(res => {
        this.dialogVisible = true;
      });
    },
    joinDone() {
      this.dialogFormVisible = false;
      this.getArtList();
    },
    addBrowseNum() {
      addBrowseNum(this.actId, 6);
    }
  },
  mounted() {
    this.getActDetail();
    this.getArtList();
    this.addBrowseNum();
  }
};
</script>

<style lang="less" scoped>
.bodyHeight {
  height: auto !important;
}

.bodyFont {
  height: 68px;
  overflow: hidden;
  max-height: 100%;
}

.header {
  border-bottom: 1px solid #bf9c51;
  .header-content {
    position: relative;
    .title-content {
      background: url("../../../assets/images/Winchance/title_bg.png") left top
        no-repeat;
      height: 27px;
      padding-left: 20px;
    }
    h3 {
      background: url("../../../assets/images/Winchance/title_bg.png") no-repeat
        right bottom;
      font-weight: normal;
      height: 27px;
      line-height: 27px;
      padding-right: 20px;
      display: inline-block;
      max-width: 100%;
    }
    p {
      font-size: 14px;
      line-height: 30px;
      padding-right: 216px;
    }
    .all-text {
      width: 100px;
      cursor: pointer;
      span {
        font-size: 14px;
        color: #dbad23;
      }
      i {
        color: #bf9c51;
      }
    }
    .btn {
      position: absolute;
      right: 0;
      bottom: 0;
    }
  }
}

.xui-grid-avg-2.xui-padding-horizontal-children-sm {
  margin-left: -5px;
  margin-right: -5px;
}

.creative-act-card {
  border: 1px solid #d2d2d2;
  transition: border-color 0.25s;
  position: relative;
  cursor: pointer;
  .card-body {
    padding: 10px 15px;
    position: relative;
    .name {
      position: absolute;
      right: 16px;
      top: 14px;
      font-size: 14px;
    }
    h3 {
      font-size: 17px;
      margin-bottom: 4px;
    }
    span {
      font-size: 12px;
      i {
        vertical-align: middle;
      }
    }
  }
  .forwording {
    width: 36px;
    height: 36px;
    position: absolute;
    right: 0;
    top: 0;
    background: url("../../../assets/images/Winchance/zhuanfa.png") no-repeat 0%
      100%;
  }
}

.creative-act-card:hover {
  border-color: #bf9c51;
}

.dialog-footer {
  text-align: center;
}

.el-button {
  display: inline-block;
}
</style>
